<template>
	<view class="body">
		<view class="nav-box">
			<view class="status_bar"></view>
			<view class="nav">
				<view class="flex-1" @click="_back">取消</view>
				<view class="nav-center">
					<view>发小说</view>
					<view class="username">{{ username }}</view>
				</view>
				<view class="nav-btn" @click="_publish">发送</view>
			</view>
		</view>
		<view class="container">
			<input class="title-input" type="text" placeholder="标题/章节名" v-model="title"/>
			<u-line/>
			<textarea class="textarea intro-text" v-model="intro" placeholder="请输入简介..." />
			<u-line/>
			<editor id="editor" class="editor flex-1" v-model="content" placeholder="正文~" @ready="onEditorReady"></editor>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { PostArticle } from '@/common/api.js'
	
	export default {
		data() {
			return {
				title: '',
				intro: '',
				content: '',
				editorCtx: null
			}
		},
		computed: {
			...mapGetters(['username'])
		},
		methods: {
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					console.log(res)
					this.editorCtx = res.context
				}).exec()
			},
			_back() {
				uni.navigateBack()
			},
			_publish() {
				this.editorCtx.getContents({
					success: (res) => {
						this.content = res.html
						if (!this.title) {
							return uni.showToast({
								title: '请输入标题或章节名',
								icon: 'none'
							})
						}
						if (!this.intro) {
							return uni.showToast({
								title: '请输入简介',
								icon: 'none'
							})
						}
						if (!this.content) {
							return uni.showToast({
								title: '请输入正文',
								icon: 'none'
							})
						}
						PostArticle({
							type: 5,
							title: this.title,
							intro: this.intro,
							content: this.content
						}).then(({ code, msg }) => {
							uni.hideLoading()
							uni.showToast({
								title: msg,
								icon: 'none',
								success: () => {
									if (code === 200) {
										this._back()
									}
								}
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.intro-text {
		padding-bottom: 32rpx;
	}
	.editor {
		margin-top: 32rpx;
		overflow-y: scrooll;
	}
	.textarea {
		margin-top: 32rpx;
	}
	.title-input {
		padding: 16rpx 0;
	}
	.container {
		padding: 24rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.flex-1 {
		flex: 1;
	}
	.nav-btn {
		background-image: linear-gradient(-90deg, #FCCF31 10%, #F55555 100%);
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		text-align: center;
		color: #fff;
		flex: 1;
	}
	.username {
		font-size: 24rpx;
		color: #909399;
	}
	.nav-center {
		text-align: center;
		flex: 5;
	}
	.nav {
		height: 88rpx;
		background-color: #f4f4f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		border-bottom: 1px solid #e7e6e4;
	}
	.status_bar {
        height: var(--status-bar-height);
		background-color: #f4f4f5;
    }
	.body {
		min-height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}
</style>
